<template>
  <view class="container">
    <van-button type="info" class="procurement-add" @click="onProcurementAddClick()">新增采购</van-button>

    <!-- 列表部分 -->
    <scroll-view 
      class="list-container" 
      scroll-y="true" 
      lower-threshold="100" 
      @scrolltolower="onLoadMore"
    >
      <!-- 循环渲染列表项 -->
      <view 
        class="list-item" 
        v-for="(item, index) in list" 
        :key="index"
        @click="onItemClick(item,index)"
      >
        <view class="list-item-title">订单编号：{{ item.orderNo }}</view>
        <view class="list-item-description">供应商：{{ item.supplierName }}</view>
        <view class="list-item-description">订单金额：{{ item.orderAmount }}</view>
        <view class="list-item-description">
          订单状态：
          <text :style="{ color: getOrderStatusColor(item.orderStatus) }">{{ getOrderStatusText(item.orderStatus) }}</text>
        </view>
        <view class="list-item-description">订货人：{{ item.buyerName }}</view>
        <view class="list-item-description">收货人：{{ item.receiverName }}</view>
        <view class="list-item-description">创建时间：{{ item.createTime }}</view>
      </view>

      <!-- 加载更多提示 -->
      <view v-if="loading" class="loading">加载中...</view>
      <view v-if="finished" class="finished">没有更多数据了</view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],          // 列表数据
      loading: false,    // 是否正在加载
      finished: false,   // 是否加载完成
      page: 1,           // 当前页码
    };
  },
  methods: {
    // 获取数据
    async fetchData() {
      if (this.finished || this.loading) return;
      let token = uni.getStorageSync('token');
      this.loading = true;
      const url = this.$C.api_url + 'api/order/list';
      uni.request({
        url,
        method: 'GET',
        data: {
          page: this.page,
          pageSize: 10, 
        },
        header: {
          'satoken': token
        },
        success: (res) => {
          const { data } = res.data;
          if (data && data.length > 0) {
            this.list = [...this.list, ...data]; // 合并数据
            this.page += 1; 
          } else {
            this.finished = true; 
          }
        },
        fail: (err) => {
          console.error('请求失败', err);
        },
        complete: () => {
          this.loading = false;
        },
      });
    },

    // 加载更多数据
    onLoadMore() {
      console.log('触发了加载更多事件');
      this.fetchData();
    },

    // 点击某一项
    onItemClick(item, index) {
      console.log('点击了第', index + 1, '项');
      uni.navigateTo({
        url: `/pages/procurementOrderProceed/procurementOrderProceed?orderNo=${item.orderNo}&orderStatus=${item.orderStatus}`
      });
    },

    // 新增采购
    onProcurementAddClick() {
      console.log("新增采购");
      uni.navigateTo({
        url: '/pages/procurementAdd/procurementAdd'
      });
    },

    // 获取订单状态文本
    getOrderStatusText(status) {
      switch (status) {
        case 1:
          return '待确认';
        case 2:
          return '已确认';
        case 3:
          return '已收货';
        case 4:
          return '已取消';
        default:
          return '未知状态';
      }
    },

    // 获取订单状态颜色
    getOrderStatusColor(status) {
      switch (status) {
        case 1:
          return '#FFA500'; // 待确认 - 橙色
        case 2:
          return '#4CAF50'; // 已确认 - 绿色
        case 3:
          return '#2196F3'; // 已收货 - 蓝色
        case 4:
          return '#F44336'; // 已取消 - 红色
        default:
          return '#000000'; // 默认颜色 - 黑色
      }
    },

    // 下拉刷新处理
    async onPullDownRefresh() {
      console.log('触发了下拉刷新事件');
      this.page = 1; // 重置页码
      this.finished = false; // 重置加载完成状态
      this.list = []; // 清空当前列表
      await this.fetchData(); // 重新获取数据
      uni.stopPullDownRefresh(); // 停止下拉刷新动画
    },
  },
  onLoad() {
    this.fetchData();
  },
  onPullDownRefresh() {
    this.onPullDownRefresh(); // 处理下拉刷新事件
  },
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #f4f7fb; 
}


.list-container {
  margin-top: 10px;
  min-height: 100vh;
  padding-bottom: 20px;
}

.list-item {
  padding: 20px;
  margin-bottom: 15px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease; 
}

.list-item:hover {
  transform: translateY(-5px); 
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); 
}

.list-item-title {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.list-item-description {
  font-size: 14px;
  color: #160e1f;
  line-height: 1.6;
}

.loading, .finished {
  text-align: center;
  color: #888;
  margin-top: 20px;
}

.loading {
  font-size: 16px;
}

.finished {
  font-size: 16px;
  color: #888;
  font-style: italic;
}

.procurement-add {
	display: flex;
  justify-content: center; /* 水平居中 */
}
</style>